<template>
  <div class="bgff p20" style="min-height:100%">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
       
        <el-form-item label="项目地区">
          <el-select v-model="formInline.region" placeholder="项目地区">
            <el-option label="雨城区" value="shanghai"></el-option>
            <el-option label="名山区" value="beijing"></el-option>
            <el-option label="天全县" value="beijing"></el-option>
            <el-option label="荥经县" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-select v-model="formInline.projectName" filterable placeholder="项目名称">
            <el-option label="项目1" value="1"></el-option>
            <el-option label="项目2" value="2"></el-option>
            <el-option label="项目3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    <ul class="clear">
      <li class="video-li plr20" v-for="(it,ind) in videos" :key="ind">
        <h2 class="tx-c ptb10 bb-e0e0e0 lh1">{{it.name}}</h2>
        <div class="imgbox">
          <img :src="it.url" alt="">
        </div>
        <div class="pt10">
          <!-- <el-link type="primary" href="https://element.eleme.io" target="_blank">{{it.mark}}</el-link> -->
        </div>
        <span class="position-middle-center playbtn pointer" @click="play(it)">
            <img src="@/assets/images/play.png" alt="">
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "hello",
    data() {
      return {
        formInline: {
            user: "",
            region: ""
        },
        videos:[
          {
            url:require('@/assets/images/video1.jpg'),
            id:1,
            mark:'于2019-05-11 12:00:00 更新',
            name:'视频A'
          },
          {
            url:require('@/assets/images/video2.jpg'),
            id:2,
            mark:'于2019-05-11 13:00:00 更新',
            name:'视频B'
          },
          {
            url:require('@/assets/images/video3.jpg'),
            id:3,
            mark:'于2019-05-11 14:00:00 更新',
            name:'视频C'
          }
        ]
      };
    },
    mounted() {
      this.videos = this.videos.concat(this.videos)
    },
    methods: {
      play(it){
        this.$router.push('/videoControl/show/'+it.id)
      },
      onSubmit(){
          this.videos = [ {
            url:require('@/assets/images/video3.jpg'),
            id:3,
            mark:'于2019-05-11 14:00:00 更新',
            name:'视频C'
          }]
      }
    }
  };
</script>

<style lang="less">
  .video-li{
    width: 380px;
    height:300px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 2px #f5f5f5;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
    .imgbox{
        width: 100%;
        height: 220px;
        overflow: hidden;
    img{
        width: 100%;
    }
    }
    .playbtn{
        i{
            color: #fff;
        }
    }
  }
</style>